﻿@{
    ViewData["Title"] = "Detail";
    Layout = "~/Views/HttpRequestMonitor/HttpRequestMonitorTemplate.cshtml";

    List<string> nodes = ViewBag.nodes;

    var lang = ViewBag.Language as JESAI.HttpRequestMonitor.Dashboard.Services.Language.ILanguage;
}

<script src="/HttpRequestMonitorStaticFiles/Content/js/mSlider.min.js"></script>
<script src="/HttpRequestMonitorStaticFiles/Content/js/jquery.nicescroll.js"></script>

<style type="text/css">

    .pagination {
        float: right;
        margin: 0;
        margin-top: -18px;
    }

    .pull-left {
        margin-top: 20px;
        padding-left: 20px;
    }

    .pull-right {
        margin-top: 20px;
        padding-right: 20px;
    }

    tbody {
        margin-bottom: 20px;
    }
</style>

<div class="panel panel-default">

    <div class="panel-body" style="padding-left:30px;padding-right:30px;padding-top:30px;min-height:720px;padding-bottom:30px">

        <div class="row" style="padding-left:13px;padding-right:13px">

            <div class="panel panel-default">
                <div class="panel-body shadow-box" style="padding-bottom:20px">

                    <div class="form-inline form">

                        <div class="col-sm-12" style="margin-top:10px">

                            <b> <b><i class="glyphicon glyphicon-signal"></i> @lang.Index_ServiceNode</b></b>

                            <span class="glyphicon glyphicon-info-sign serviceTip" style="font-size:20px;top:0.2em;cursor:pointer"></span>

                            @*<button type="button" onclick="select_all(this)" style="width:60px;margin-right:8px;margin-left:8px" class="btn btn-success btn-xs">全选</button>

                                <button type="button" onclick="select_reverse(this)" style="width:60px;margin-right:8px;" class="btn btn-success btn-xs">反选</button>*@
                        </div>

                        <div class="col-sm-12 node-row" style="margin-top:8px;margin-bottom:8px;min-height:44px">

                            @foreach (var item in nodes)
                            {
                                <button onclick="check_node(this)" style="width:120px;margin-left:20px;border-radius:4px;" class="btn btn-info service-button">@item</button>
                            }
                        </div>
                    </div>

                    <div class="form-inline form" style="margin-bottom:30px;">

                        <div class="col-sm-3">
                            <label class="form-label">TraceId</label>
                            <input type="text" class="form-control traceId">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.StatusCode</label>
                            <input type="text" class="form-control statusCode">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.StartTime</label>
                            <input type="text" onfocus="ClearTimeRange()" class="form-control laydate start">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.EndTime</label>
                            <input onfocus="ClearTimeRange()" type="text" class="form-control laydate end">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.Request_RequestUrl</label>
                            <input type="text" class="form-control laydate url">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">@lang.Request_IPAddress</label>
                            <input placeholder="" type="text" class="form-control laydate ipadress">
                        </div>


                    </div>

                    <div class="col-sm-12 timeSelect" style="margin-top:20px">

                        <button type="button" onclick="timeChange(this,15)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_15m</button>

                        <button type="button" onclick="timeChange(this,30)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_30m</button>

                        <button type="button" onclick="timeChange(this,60)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_1h</button>

                        <button type="button" onclick="timeChange(this,60*4)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_4h</button>

                        <button type="button" onclick="timeChange(this,60*12)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_12h</button>

                        <button type="button" onclick="timeChange(this,60*24)" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">@lang.Time_24h</button>

                    </div>

                    <div class="col-sm-12">

                        <div class="col-sm-3" style="padding-left:0">

                            <button style="min-width:120px;" onclick="QueryClick(this)" class="btn btn-info btn-search">@lang.Query</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-body shadow-box" style="padding-bottom:20px">

                    <div class="col-sm-12" style="margin-top:24px;">

                        <table id="TableData" class="table table-bordered" style="background-color:#FFF;width:100%;margin:0 auto; clear:both;border-top:2px solid #67c2ef;"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="contextBox" style="display:none;">

    <h3 class="request_detail_notfound" style="display:none">@lang.Request_NotFound</h3>

    <h3 class="request_detail_title" style="padding-left:6px;margin-bottom:16px"><i class="fa fa-star-half-o" style="margin-right:10px"></i> @lang.Request_BasicInfo</h3>

    <table class="table table-striped table-bordered" style="word-break:break-all">
        <thead>
            <tr>
                <th width="160">Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>RequestId</td>
                <td class="context_requestId" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>
            <tr>
                <td>@lang.Index_ServiceNode</td>
                <td class="context_node" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>
            <tr>
                <td>@lang.Request_Route</td>
                <td class="context_route" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>

            <tr>
                <td>@lang.Request_Url</td>
                <td class="context_url" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>

            <tr>
                <td>@lang.Request_Type</td>
                <td class="context_method" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>

            <tr>
                <td>@lang.Request_Connection</td>
                <td class="context_requestType" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>

            <tr>
                <td>@lang.Request_Time</td>
                <td class="context_milliseconds" style="text-align:left;font-size:12px;padding-left:8px"></td>
            </tr>

            <tr>
                <td>@lang.Request_StatusCode</td>
                <td class="context_statusCode" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>

            <tr>
                <td>@lang.Request_RemoteIP</td>
                <td class="context_ip" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>

            <tr>
                <td>@lang.Request_RemotePort</td>
                <td class="context_port" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>

            <tr>
                <td>@lang.Request_LocalIP</td>
                <td class="context_localIp" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>

            <tr>
                <td>@lang.Request_LocalPort</td>
                <td class="context_localPort" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>

            <tr>
                <td>@lang.Request_CreateTime</td>
                <td class="context_createTime" style="text-align:left;font-size:12px;padding-left:6px"></td>
            </tr>


        </tbody>
    </table>

    <h3 class="request_detail_title" style="padding-left:6px; margin-top:20px;margin-bottom:16px"><i class="fa fa-space-shuttle" style="margin-right:10px"></i>  @lang.Request_DetailInfo</h3>

    <table class="table table-striped table-bordered" style="word-break:break-all">
        <thead>
            <tr>
                <th width="160">Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>QueryString</td>
                <td class="context_queryString" style="text-align:left;font-size:12px"></td>
            </tr>

            <tr>
                <td>Header</td>
                <td class="context_header" style="text-align:left;font-size:12px"></td>
            </tr>

            <tr>
                <td>Cookie</td>
                <td class="context_cookie" style="text-align:left;font-size:12px"></td>
            </tr>

            <tr>
                <td>RequestBody</td>
                <td class="context_requestBody" style="text-align:left;font-size:12px"></td>
            </tr>


            <tr>
                <td>ResponseBody</td>
                <td class="context_responseBody" style="text-align:left;font-size:12px"></td>
            </tr>

            <tr>
                <td>Error</td>
                <td class="context_error" style="text-align:left;font-size:12px"></td>
            </tr>

            <tr>
                <td>ErrorStack</td>
                <td class="context_errorStack" style="text-align:left;font-size:12px"></td>
            </tr>


        </tbody>
    </table>

</div>

<script src="/HttpRequestMonitorStaticFiles/Content/page/detail.js?ver=1.0.4"></script>